<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>登录注册</title>
    <link rel="stylesheet" type="text/css" href="css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate-custom.css"/>
    <link rel="stylesheet" href="css/jigsaw.css">
    <style>
        b {
            color: red;
        }

        img {
            width: 350px;
        }

        .abc {
            width: 310px;
            margin: 0 auto;
        }

        #msg {
            width: 100%;
            line-height: 40px;
            font-size: 14px;
            text-align: center;
        }

        li {
            float: left;
            width: 8%;
            position: relative;
            left: 38%;
            font-size: 20px;
            padding-top: 1%;
        }
        #captcha {
            position: relative;
            top: 10%;
        }

        .a {
            margin-left: -2.5%;
        }

        .b {
            margin-left: -2%;
        }

        .c {
            margin-left: -7%;
        }

    </style>
</head>
<body>
<div class="container">
    <header>
        <h1><span>会员登陆注册</span></h1>
        <nav class="codrops-demos">
            <span>点击<strong>"加入我们"</strong>进行注册</span>
        </nav>
        <nav class="c">
            <ul>
                <li><strong><a href="xiugai.php">会员资料修改</a></strong></li>
                <li><a href="admin.php"><strong>管理员中心</strong></a></li>
                <li><strong>当前用户为 :</strong></li>
                <?php
                if (isset($_SESSION['loggedUsername']) && $_SESSION['loggedUsername']) {
                    ?>
                    <li class="a"><strong><?php echo $_SESSION['loggedUsername'] ?></strong></li>
                    <?php
                }
                ?>
                <?php
                if (!isset($_SESSION['loggedUsername'])) {
                    ?>
                    <li class="b"><strong>暂无用户</strong></li>
                    <?php
                }
                ?>
                <?php
                if (isset($_SESSION['loggedUsername']) && $_SESSION['loggedUsername']) {
                    ?>
                    <li class="a"><a href="zhuxiao.php"> <strong>注销</strong></a></li>
                    <?php
                }
                ?>
            </ul>
        </nav>
    </header>
    <section>
        <div id="container_demo">
            <a class="hiddenanchor" id="tologin"></a>
            <a class="hiddenanchor" id="toregister"></a>
            <div id="wrapper">
                <div id="login" class="animate form">
                    <form action="denglu.php" method="post" id="loginForm">
                        <h1>登陆</h1>
                        <p>
                            <label data-icon="u">您的电子邮件或用户名</label>
                            <label id="ulTips"></label>
                            <input id="ul" name="ul" placeholder="您的电子邮件或用户名"/>
                        </p>
                        <p><img id="img" src="images/loding.gif" style="display: none"></p>
                        <p>
                            <label data-icon="p">密码</label>
                            <label id="pwTips"></label>
                            <input id="pw" name="pw" type="password" placeholder="密码"/>
                        </p>
                        <p class="keeplogin">
                            <input type="checkbox" name="remember" id="remember" value="loginkeeping"/>
                            <label for="remember">记住登录状态</label>
                        </p>
                        <p class="login button" id="b">
                            <input type="button" id="log" value="登陆"/>
                        </p>
                        <p class="change_link">
                            还不是会员？
                            <a href="#toregister" class="to_register">加入我们</a>
                        </p>
                    </form>
                </div>

                <div id="register" class="animate form">
                    <form action="zhuce.php" method="post" enctype="multipart/form-data">
                        <h1> 注册 </h1>
                        <p>
                            <label data-icon="u">用户名<b>*必填</b></label>
                            <label id="usernameTips"></label>
                            <input id="username" name="username" placeholder="输入你要注册的用户名"/>
                        </p>
                        <p>
                            <label data-icon="p">密码<b>* </b></label>
                            <label id="passwordTips"></label>
                            <input id="password" name="password" placeholder="例如：陈杰是小狗"/>
                        </p>
                        <p>
                            <label data-icon="p">确认密码 <b>* </b></label>
                            <label id="cpasswordTips"></label>
                            <input id="cpassword" name="cpassword" type="password"
                                   placeholder="确认你输入的密码"/>
                        </p>
                        <p>
                            <label data-icon="e">邮箱</label>
                            <input id="email" name="email" type="email" placeholder="输入你的邮箱"/>
                        </p>
                        <p>
                            <label data-icon="u">年龄</label>
                            <input id="age" name="age" type="number" placeholder="输入你的年龄"/>
                        </p>

                        <p>
                            <label>性别：</label>
                            <input type="radio" name="sex" value="男" checked>男
                            <input type="radio" name="sex" value="女" style="margin-left:30px ">女
                        </p>
                        <p>
                            <label>爱好：</label>
                            <input type="checkbox" name="fav[]" value="听音乐">听音乐
                            <input type="checkbox" name="fav[]" value="玩游戏">玩游戏
                            <input type="checkbox" name="fav[]" value="踢足球">踢足球
                        </p>
                        <p>
                            <label>选择头像</label>
                            <input id="pic" name="pic" type="file">
                        </p>
                        <p>
                            <label data-icon="u">个人介绍</label>
                            <input id="ren" name="ren" placeholder="简单介绍你自己"/>
                        </p>
                        <p>
                            <label>验证码</label>
                            <b id="d">*</b>
                        </p>
                        <p class="p">
                        <div class="abc">
                            <div id="captcha"></div>
                            <div id="msg"></div>
                        </div>
                        </p>
                        <p class="signin button">
                            <input type="button" name="a" id="a" title="按要求填完并且验证通过后才能注册" value="注册"/>
                        </p>
                        <p class="change_link">
                            已有账号？
                            <a href="#tologin" class="to_register"> 去登陆 </a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <div style="text-align:center;clear:both;position: relative;top: 76%">
        <p> 版权归第三组所有；使用本网站须陈杰同意，违者必究。 </p><br>
        <p>©2018-2020 陈杰,&nbsp&nbsp&nbsp蓝跃，黎大王</p>
    </div>
</div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jigsaw.js"></script>
<script>
    $(function () {
        //登陆验证
        $("#ul").blur(function () {
            var ul = $.trim($("#ul").val());
            if (ul == "") {
                $("#ulTips").html("<span style='color:red'>用户名必须填写</span>");
            }
            else {
                $("#ulTips").html("<span></span>");
            }
        });
        $("#pw").blur(function () {
            var pw = $.trim($("#pw").val());
            if (pw == "") {
                $("#pwTips").html("<span style='color:red'>密码必须填写</span>");
            }
            else {
                $("#pwTips").html("<span></span>");
            }
        });
        $("#b").click(function () {
            var ul = $.trim($("#ul").val());
            if (ul == "") {
                $("#ulTips").html("<span style='color:red'>用户名必须填写</span>");
                $("#ul").focus();
            }
            var pw = $.trim($("#pw").val());
            if (pw == "") {
                $("#pwTips").html("<span style='color:red'>密码必须填写</span>");
            }
            else {
                $("#pwTips").html("<span></span>");
            }
            if (ul !== "" && pw !== "") {
                $("input[id='log']").attr('type', 'submit');
            }
        });
        //注册验证
        jigsaw.init(document.getElementById('captcha'), function () {
            document.getElementById('msg').innerHTML = '验证成功！';
            var ace = 1;
            $("#a").click(function () {
                var username = $.trim($("#username").val());
                if (username == "") {
                    $("#usernameTips").html("<span style='color:red'>用户名必须填写</span>");
                    $("#username").focus();
                }
                var password = $.trim($("#password").val());
                if (password == "") {
                    $("#passwordTips").html("<span style='color:red'>密码必须填写</span>");
                }
                else {
                    $("#passwordTips").html("<span></span>");
                }
                var cpassword = $.trim($("#cpassword").val());
                if (cpassword == "") {
                    $("#cpasswordTips").html("<span style='color:red'>密码必须填写</span>");
                }
                else {
                    $("#cpasswordTips").html("<span></span>");
                }
                if (username !== "" && password !== "" && ace == 1 && cpassword!=="") {
                    $("input[name='a']").attr('type', 'submit');
                }
            });
        }, function () {
            document.getElementById('msg').innerHTML = '验证失败！';
        });
        $("#a").click(function () {
            var username = $.trim($("#username").val());
            if (username == "") {
                $("#usernameTips").html("<span style='color:red'>用户名必须填写</span>");
                $("#username").focus();
            }
            var password = $.trim($("#password").val());
            if (password == "") {
                $("#passwordTips").html("<span style='color:red'>密码必须填写</span>");
            }
            else {
                $("#passwordTips").html("<span></span>");
            }
            var cpassword = $.trim($("#cpassword").val());
            if (cpassword == "") {
                $("#cpasswordTips").html("<span style='color:red'>密码必须填写</span>");
            }
            else {
                $("#cpasswordTips").html("<span></span>");
            }
        });
        var errlog = 1;
        $("#username").blur(function () {
            var username = $.trim($("#username").val());
            if (username == "") {
                $("#usernameTips").html("<span style='color:red'>用户名必须填写</span>");
            }
            else {
                $.ajax({
                    url: "checkusername.php",
                    data: {
                        username: $("#username").val()
                    },
                    type: "POST",
                    dataType: "JSON",
                    success: function (data) {
                        if (data.error) { //说明用户名被占用
                            $("#usernameTips").html("<span style='color:red'>此用户名已被占用</span>");
                        }
                        else {
                            $("#usernameTips").html("<span style='color:darkgreen'>此用户名已可以使用</span>");
                            errlog = 0;
                        }
                    }
                });
            }
        });
        $("#password").blur(function () {
            var password = $.trim($("#password").val());
            if (password == "") {
                $("#passwordTips").html("<span style='color:red'>密码必须填写</span>");
            }
            else {
                $("#passwordTips").html("<span></span>");
            }
        });
        $("#cpassword").blur(function () {
            if ($("#password").val() !== $("#cpassword").val()) {
                $("#cpasswordTips").html("<span style='color:red'>两次密码不一致请修改</span>");
            }
            else {
                if ($("#cpassword").val() !== "") {
                    $("#cpasswordTips").html("<span style='color:darkgreen'>密码相同 </span>");
                    errlog = 0;
                }
                else {
                    $("#cpasswordTips").html("<span style='color:red'>两次密码不一致请修改</span>");
                }
            }
        });
    });
    //记住密码
    window.onload = function () {
        var oForm = document.getElementById('loginForm');
        var oUser = document.getElementById('ul');
        var oPw = document.getElementById('pw');
        var oRemember = document.getElementById('remember');
        //页面初始化时，如果帐号密码cookie存在则填充
        if (getCookie('ul') && getCookie('pw')) {
            oUser.value = getCookie('ul');
            oPw.value = getCookie('pw');
            oRemember.checked = true;
        }
        //复选框勾选状态发生改变时，如果未勾选则清除cookie
        oRemember.onchange = function () {
            if (!this.checked) {
                delCookie('ul');
                delCookie('pw');
            }
        };
        //表单提交事件触发时，如果复选框是勾选状态则保存cookie
        oForm.onsubmit = function () {
            if (remember.checked) {
                setCookie('ul', oUser.value, 7); //保存帐号到cookie，有效期7天
                setCookie('pw', oPw.value, 7); //保存密码到cookie，有效期7天
            }
        };
    };

    //设置cookie
    function setCookie(name, value, day) {
        var date = new Date();
        date.setDate(date.getDate() + day);
        document.cookie = name + '=' + value + ';expires=' + date;
    }

    //获取cookie
    function getCookie(name) {
        var reg = RegExp(name + '=([^;]+)');//RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
        var arr = document.cookie.match(reg);
        if (arr) {
            return arr[1];
        } else {
            return '';
        }
    }
    //删除cookie
    function delCookie(name) {
        setCookie(name, null, -1);
    }
</script>
</html>